import React, { useEffect, useState } from 'react';
import { Table, Pagination,Button, Tag, Modal, message, Popover, Switch } from 'antd';
import API from '../../../util/api';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

export default function RightList() {
    const [dataSource, setdataSource] = useState([]);
    useEffect(() => {
        getList();
    },[]);

    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          align: 'center',
          render:(id)=>{
          return <b>{id}</b>
          }
        },
        {
            title: '权限名称',
            dataIndex: 'title',
            align: 'center'
        },
        {
            title:"权限路径",
            dataIndex:'key',
            align: 'center',
            render:(key)=>{
            return <Tag color="orange">{key}</Tag>
            }
        },
        {
            title:"操作",
            align: 'center',
            render:(row)=>{
            return <div>
                <Button danger shape="circle" icon={<DeleteOutlined />} onClick={ () => {confirmMethod(row)}} />
                <Popover content={
                            <div style={{textAlign:"center"}}>
                                <Switch checked={row.pagepermisson} onChange={()=>switchMethod(row)}></Switch>
                            </div>} 
                         title="页面配置项" 
                         trigger={row.pagepermisson === undefined ? '' : 'click'}>
                        <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={row.pagepermisson === undefined}/>
                </Popover>
            </div>
            }
        }
      ];
    const confirmMethod  =  (row) => {
        console.log(row)
        confirm({
            title: '请确定要删除这条数据?',
            icon: <ExclamationCircleOutlined/>,
            // content: '111',
            onOk () {
                deleteItem(row);
            },
            onCancel () {

            }
        });
    }
    // 删除
    const deleteItem = (row) => {
        if (row.grade === 1) {
            setdataSource(dataSource.filter(data => data.id !== row.id));
            API.delRight(row.id).then(res => {
                if (res.status === 200) {
                    message.success('删除成功!')
                } else {
                    message.error(res.statusText);
                }
            });
        } else {
            let list = dataSource.filter(data => data.id === row.rightId); //取当前组数据
            console.log(list);
            list[0].children = list[0].children.filter(data => data.id !== row.id);
            setdataSource([...dataSource]);
            API.delRight(row.id).then(res => {
                if (res.status === 200) {
                    message.success('删除成功!')
                } else {
                    message.error(res.statusText);
                }
            });
        }
    }
    // 修改配置项
    const switchMethod = (row) => {
        row.pagepermisson = row.pagepermisson === 1 ? 0 : 1;
        setdataSource([...dataSource]);
        if(row.grade===1){
            API.changeRight(row.id,{pagepermisson:row.pagepermisson}).then(res => {
                if (res.status === 200) {
                    message.success('修改成功');
                }
            });
        }else{
            API.changeChildrenRight(row.id,{pagepermisson:row.pagepermisson}).then(res => {
                if (res.status === 200) {
                    message.success('修改成功');
                }
            });
        }
    }
    // 查询权限列表
    const getList = () => {
        API.rights({_embed:'children'}).then().then(res=>{
            const list = res.data;
            list.forEach(item => {
                if (item.children.length === 0) {
                    item.children = '';
                }
            });
            setdataSource(list);
        });
    }
    const onChange = (page,pageSize) => {
        console.log(page,pageSize)
        //可直接赋值给查询接口分页参数
    }
    return (
        <div>
            <Table  dataSource={dataSource} 
                    columns={columns}
                    bordered>
            </Table>
            <Pagination style={{marginTop: '10px',textAlign:'center'}}
                        total={100}
                        pageSize={10}
                        current={1}
                        showSizeChanger
                        showQuickJumper
                        showTotal={total => `总共 ${total} 条`}
                        onChange= {onChange}> 
            </Pagination>
        </div>
    )

}